前言

前一篇寫單元測試的目的之一就是讓除錯變得容易一點，但實際在除錯的時候還是得掌握一些可以使用的工具，尤其是對寫 Web 習慣的開發者來說，一開始的時候看不到 console.log 可能就會有點亂了陣腳，這篇就會針對一些常用的部分做點介紹。

Log

除錯千百年不變的絕招，就是印出來看一下就對了。所以一開始就先學這招不會錯，依照平台需要下不同的指令：

$ react-native log-ios
$ react-native log-android

就可以把 log 的一些資訊印到 Terminal：

console.log('印一點東西出來')

雖然裡面夾雜一些其他訊息，不過還是看到的有印一點東西出來在裡面。

錯誤畫面

React Native 在顯示錯誤訊息上面下了不少功夫，只要有沒有處理到的錯誤，就會用滿版的 Redbox 的顯示錯誤訊息。

也可以用 console.error 觸發：

console.error('Error!!!');

而中間的 Error Stack 是可以點的，點擊後會用預設的編輯器打開對應的程式碼檔案與行數。

警告的部分則是用 YellowBox 來處理，可以用 console.warn 來顯示警告訊息：

console.warn('Warn~~~');

就會在下方出現黃色的小橫幅提示：

這些東西後來也影響了許多在瀏覽器運行的開發工具，這兩個 UI Component 也被社群抽出來寫成獨立的套件：

• redbox-react
• yellowbox-react

開發者選單

在 iOS 用 Command + D 或在 Android 則是 Command + M 可以叫出開發者選單 (在裝置上測試的話可以用搖一下來觸發)：

Reload

這裡面除了最一般的 Reload (Command + R) 還有下面兩種自動 Reload 的模式：

• Live Reload：檔案改變時就 Reload
• Hot Reload：檔案改變時就藉由 HMR 做保留 State 的 Reload

在這兩種模式下可以改寫完就馬上就看到結果，對於增加開發速度非常有幫助，也是 JavaScript 勝過 Native 的一個重要開發體驗。

遠端除錯

在開發者選單內點擊 Debug JS Remotely 即可開啟遠端除錯功能。

開啟後在 http://localhost:8081/debugger-ui 就可以使用 Chrome 的開發工具。除了可以看到 console 相關的訊息外，也可以使用 Chrome 的 Debugger，可以使用 Pause On Caught Exceptions 或是 Break Point 等等的功能。

Inspector

內建 Inspector

在開發者選單內點擊 Show Inspector 就能開啟 React Native 內建的 Inspector：

也有 Network 的部分可以看：

React Native Inspector (Nuclide)

前面的 IDE (Integrated Development Environment) for React Native 這篇有提到使用 Nuclide 時，在 Command Palette 選擇：

Nuclide React Native Inspector: Show

就能看到 React Native Inspector：

如此以來就可以快速地找出 State、Props 或是 Render 寫錯的地方。

React Native Debugger

不過也不是每個人都會想用 Nuclide。另外一個很不錯的 Inspector 選擇是，Jhen-Jie Hong 開發的 React Native Debugger，除了可以獨立執行外，它還附帶了 Redux 的 Devtools。

結語

除錯的方式也不必學太多種，只要把常用到的兩三種交叉使用，通常 Bug 就會原形畢露。不過要特別注意的是，開太多的功能也可能會拖累模擬器的效能，尤其是遠端除錯類的功能，在使用的時候最好特別小心。